<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/layui/layui.js" charset="utf-8"></script>


    <style type="text/css">

        .invisible {
            height: .5rem;
            top: .7rem;
        }

        .visible {
            height: .8rem;
            top: .55rem;
        }

        #updateReload{
            display: none;
        }
    </style>
</head>
<body>
<div class="demoTable">

    用户账号：
    <div class="layui-inline">
        <input class="layui-input" id="userName" name="userName">
    </div>
    手机号：
    <div class="layui-inline">
        <input class="layui-input" id="userPhone"  name="userPhone" >
    </div>
    <button class="layui-btn" id="query" >搜索</button>
    <button class="layui-btn layui-btn-primary" onclick="add();">添加</button>
</div>
<table id="showUser" class="layui-table"
       lay-data="{width: 990,heigth: 'full-500',cellMinWidth: 80,url:'../../verycdUser/findAll', page:true, id:'idTest' }"
       lay-filter="demo" >
    <thead>
    <tr>
        <th lay-data="{field:'userName',  align:'center'}">用户名</th>
        <th lay-data="{field:'userSex',  align:'center'}">性别</th>
        <th lay-data="{field:'userPhone',  align:'center'}">手机号</th>
        <th lay-data="{fixed:'right', width:120, align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
</table>

<script type="text/javascript">
    var verycdUser = null ;
    var table;
    var openindex;

    layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element','tree'], function() {
        var form = layui.form
            ,laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,upload = layui.upload //上传
            ,element = layui.element; //元素操作

        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj) {
            console.log(obj)
        });

        //监听工具条
        table.on('tool(demo)', function(obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除该用户吗？', function(index) {
                    layer.close(index);
                    var userId = data.userId;
                    var url = "../../verycdUser/deleteById";

                    console.info(userId);
                    $.ajax({
                        asyn : true,
                        type : "DELETE",
                        url : url,
                        data : {userId:userId},
                        success : function(msg) {
                            if (msg.state == "1") {
                                layer.msg(msg.msg);
                                table.reload('idTest'); //刷新表格
                            } else {
                                layer.msg(msg.msg);
                            }
                        },
                        error : function(fh) {
                            layer.msg(msg.msg);
                        }
                    },"json");
                });
            } else if (obj.event === 'edit') {
                var userId=data.userId;

                //使用jquery的ajax方式向后台提交数据
                var url = "../../verycdUser/selectOne";
                var da= {userId:userId} ;
                $.get(url,da,function(data){
                    verycdUser = data ;
                    openindex= layer.open({
                        type: 2,
                        area : ['65%' , '70%'],//弹出框大小
                        shift:1,//弹出框动画效果
                        content: ['HouTaiForm.html','on'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        success:function(layero,index){
                            var body = layer.getChildFrame('body',index);//确定两个页面之间的父子关系

                            body.find("#userId").val(data.userId);
                            body.find("#userName").val(data.userName);
                            body.find("#userSex").val(data.userSex);
                            body.find("#userPhone").val(data.userPhone);
                            //将弹出页面的取消按钮设置点击事件
                            body.find("#closeUpdate").on("click",function(){
                                layer.close(index);
                            })
                        }
                    });

                },dataType="JSON");

            }
        });
        $("#query").on("click",function(){
            console.info($("#userName").val());
            //执行重载
            table.reload('idTest', {
                where : {
                    'userName' : $("#userName").val(),
                    'userPhone' : $("#userPhone").val()
                },
                page : {
                    curr : 1
                }
            });
        });



    });
    function add() {
        openindex= layer.open({
            type: 2,
            area : ['65%' , '70%'],//弹出框大小
            shift:1,//弹出框动画效果
            content: ['HouTaiForm.html','on'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            success:function(layero,index){
                var body = layer.getChildFrame('body',index);//确定两个页面之间的父子关系

                //将弹出页面的取消按钮设置点击事件
                body.find("#closeUpdate").on("click",function(){
                    layer.close(index);
                })
            }
        });
    }

</script>
</body>
</html>